<!-- [autoplay]="autoPlay" -->
<!--防止视频多导致加载慢 preload="none"  metadata-->
<div class="main-wrap">
  
  <div id="id-hi-video-wrapper{{index}}" class="hi-video-wrapper" hivideoid="hivideoid">
    <!-- <ng-container *ngIf="autoPlay; else noPlay">
      <video appDebounceClick (debounceClick)="videoClick($event)" preload="auto" [src]="videoSrc" ishivideo="true" isrotate="false"
      id="is-hivideo-{{hivideoid}}-{{index}}" playsinline="true" webkit-playsinline="true" x-webkit-airplay="false" airplay="false"  autoPlay
      x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"
      poster="{{posterUrl}}?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,w_280,ar_auto" autohide="autohide" hivideoid="hivideo"
      class="hi-video" [ngStyle]="cssStyle|styleFilter">
    </video>
    </ng-container>
    <ng-template #noPlay>
      <video appDebounceClick (debounceClick)="videoClick($event)" preload="none" [src]="videoSrc" ishivideo="true" isrotate="false"
      id="is-hivideo-{{hivideoid}}-{{index}}" playsinline="true" webkit-playsinline="true" x-webkit-airplay="false" airplay="false"  
      x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"
      poster="{{posterUrl}}?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,w_280,ar_auto" autohide="autohide" hivideoid="hivideo"
      class="hi-video" [ngStyle]="cssStyle|styleFilter">
    </video>
    </ng-template> -->
    <video appDebounceClick (debounceClick)="videoClick($event)" preload="none" [src]="videoSrc" ishivideo="true" isrotate="false"
      id="is-hivideo-{{hivideoid}}-{{index}}" playsinline="true" webkit-playsinline="true" x-webkit-airplay="false" airplay="false"  
      x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"
      poster="{{posterUrl}}?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,w_280,ar_auto" autohide="autohide" hivideoid="hivideo"
      class="hi-video" [ngStyle]="cssStyle|styleFilter">
    </video>
    <div id="id-videoBar-{{hivideoid}}-{{index}}" hivideoid="videoBar" class="hi-video-controlbar">
      <div class="video-play float"> <button id="id-playBtn-{{hivideoid}}-{{index}}" hivideoid="playBtn" class="offBtn"></button>
      </div>
      <div class="video-slider float"> <progress hivideoid="progressbar" class="progressbar" value="0"
          max="100"></progress> <input id="id-seekbar-{{hivideoid}}-{{index}}" type="range" hivideoid="seekbar" value="0"
          class="seekbar">
      </div>
      <div class="video-time float"> <span id="id-video-time-current-{{hivideoid}}-{{index}}"
          class="video-time-current">0:0</span><span>/</span><span id="id-video-time-total-{{hivideoid}}-{{index}}"
          class="video-time-total">0:0</span> </div>
      <div class="video-mute float"> <button id="id-muteBtn-{{hivideoid}}-{{index}}" hivideoid="muteBtn" class="onBtn"></button> </div>
      <div class="video-volume float"> <input id="id-volumebar-{{hivideoid}}-{{index}}" type="range" hivideoid="volumebar"
          class="volumebar" value="10" min="0" max="100" step="0.1"> </div>
      <div class="video-fullscreen float"> <button id="id-fullBtn-{{hivideoid}}-{{index}}" hivideoid="fullBtn" class="onBtn"></button>
      </div>
    </div>

    <div id="id-centerPlayIcon-{{hivideoid}}-{{index}}" hivideoid="centerPlayIcon" class="hi-video-playIcon offBtn"
      [ngStyle]="playIconCssStyle|styleFilter"></div>
    <div id="id-full-area-{{hivideoid}}-{{index}}" *ngIf="videoData && videoData.link" class="video-full-area-bg">
      <div class="title-bg"  [ngStyle]="videoData.titleBgCssStyle | styleFilter">
        <img class="sound-icon" src="{{videoData.sound==='on' ? videoData.soundOnIcon:videoData.soundOffIcon}}" alt="" [ngStyle]="videoData.soundIconCssStyle | styleFilter" appDebounceClick (debounceClick)="soundOnOff(videoData)">
        <span class="title" [ngStyle]="videoData.titleCssStyle | styleFilter">{{videoData.title}}</span>
        <img class="full-icon" src="{{videoData.palyFullIcon}}" alt="" [ngStyle]="videoData.palyFullIconCssStyle | styleFilter" appDebounceClick (debounceClick)="openPage($event,videoData.link)">

      </div>

    </div>  
  </div>

</div>